<template>
  <div class="search">
    <div class="base-c">
      <div class="input-box">
        <input
          type="text"
          placeholder="搜索歌曲、歌手、专辑"
          v-model="keywords"
          @keyup="inputing"
          @keydown.enter="searching"
        />

        <i class="del" v-if="keywords.length" @click.stop="clearText"></i>
      </div>
    </div>

    <DynamicComponent
      :is="componet_name"
      style="margin-top: 60px"
      :keywords="keywords"
      @changeKeyWord="onChangeKeyWord"
      @toggleComponent="toggleComponent"
    />
  </div>
</template>

<script>
// 导入lodash
import _ from "lodash";

import SearchHot from "@/components/DynamicComponent/search/SearchHot.vue";
import SearchSuggest from "@/components/DynamicComponent/search/SearchSuggest.vue";
import SearchResult from "@/components/DynamicComponent/search/SearchResult.vue";

export default {
  name: "HomeSearch",
  components: {
    SearchHot,
    SearchSuggest,
    SearchResult,
  },
  data() {
    return {
      keywords: "",
      componet_name: "SearchHot", // 动态组件
    };
  },
  methods: {
    /**
     * 动态组件逻辑
     *
     * 按下回车之前
     * 如果没有搜索关键字是热门搜索(SearchHot)
     * 否则是搜索建议(SearchSuggest)
     *
     * 按下回车之后
     * 搜索结果(SearchResult)
     *
     * 点击搜索建议切换到 搜索结果(SearchResult)
     */
    inputing: _.debounce(function () {
      if (this.keywords.length === 0) {
        this.componet_name = "SearchHot";
      } else if (this.keywords.length > 0) {
        this.componet_name = "SearchSuggest";
      }
    }, 500),

    // 清空输入框内容，切回热门搜索
    clearText() {
      this.keywords = "";
      this.componet_name = "SearchHot";
    },

    // 按回车进入搜索结果页
    searching() {
      this.componet_name = "SearchResult";
    },

    // 点击热门搜索任意一个或点搜索建议，跳转到搜索结果
    onChangeKeyWord(data) {
      this.keywords = data;
      this.componet_name = "SearchResult";
    },

    // 切换动态组件
    toggleComponent(data) {
      console.log("data -> ", data);
      this.keywords = data;
      this.componet_name = "SearchResult";
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  position: relative;

  .base-c {
    width: 100%;
    height: 60px;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 3;

    .input-box {
      width: 100%;
      margin: 15px 0;
      background: #eee;
      padding-left: 9px;
      border-radius: 15px;
      display: flex;
      align-items: center;

      input {
        flex: 1;
        line-height: 30px;
        height: 30px;
        overflow: hidden;
        padding-left: 8px;
        background-color: transparent;
        border: 0;
        outline: none;
        color: #333;
        &::-webkit-input-placeholder {
          color: #ccc;
        }
        &::-moz-input-placeholder {
          color: #ccc;
        }
        &::-ms-input-placeholder {
          color: #ccc;
        }

        &::placeholder {
          color: #cbcbcb;
          font-size: 14px;
        }
      }

      .del {
        background: url("../../assets/取消.svg") no-repeat;
        position: absolute;
        width: 12px;
        height: 12px;
        right: 10px;
        transform: translateY(0%);
      }
    }
  }
}
</style>
